<template>
    <div class="commissionTemplateHeadComponent" v-if="oItem" :style="{
      paddingTop: oItem.main.wrapperPT + 'px',
      paddingBottom: oItem.main.wrapperPB + 'px',
      paddingLeft: oItem.main.wrapperPLR + 'px',
      paddingRight: oItem.main.wrapperPLR + 'px',
    }">
        <div class="wrapper" :style="{
      paddingTop: oItem.main.modulePT + 'px',
      paddingBottom: oItem.main.modulePB + 'px',
      paddingLeft: oItem.main.modulePLR + 'px',
      paddingRight: oItem.main.modulePLR + 'px',

      borderTopLeftRadius: oItem.main.wrapperBTR + 'px',
      borderTopRightRadius: oItem.main.wrapperBTR + 'px',
      borderBottomLeftRadius: oItem.main.wrapperBBR + 'px',
      borderBottomRightRadius: oItem.main.wrapperBBR + 'px',

      backgroundColor: oItem.main.wrapperBgColor||'transparent',
      backgroundImage: oItem.main.wrapperBgImg?('url(\''+oItem.main.wrapperBgImg+'\')'):'none'
    }">
            <div class="content" :style="{
          borderTopLeftRadius: oItem.main.moduleBTR + 'px',
          borderTopRightRadius: oItem.main.moduleBTR + 'px',
          borderBottomLeftRadius: oItem.main.moduleBBR + 'px',
          borderBottomRightRadius: oItem.main.moduleBBR + 'px',

          backgroundColor: oItem.main.moduleBgColor||'transparent',
          backgroundImage: oItem.main.moduleBgImg?('url(\''+oItem.main.moduleBgImg+'\')'):'none'
        }">
                <div class="left">
                    <span class="leftIcon" v-if="oItem.main.leftIcon">
                        <i class="bg" :style="{ backgroundColor: oItem.main.leftIconColor||'transparent' }"></i>
                        <i class="icon" :class="oItem.main.leftIcon" :style="{ color: oItem.main.leftIconColor||'transparent' }"></i>
                    </span>
                    <span class="txt" :style="{ color: oItem.main.titleFontColor||'transparent' }">{{
            oItem.main.title
          }}</span>
                </div>
                <div class="right">
                    <div class="style1" v-if="oItem.main.style === 1">
                        <button :style="{
                backgroundColor: oItem.main.btnBgColor||'transparent', 
              }">
                            <i class="iconfont icon-tianjia" :style="{color: oItem.main.btnIconColor||'transparent'}"></i>
                            <span :style="{color: oItem.main.btnFontColor||'transparent'}">添加</span>
                        </button>
                    </div>
                    <div class="style2" v-if="oItem.main.style === 2">
                        <a href="javascript:;">
                            <span class="btn" :style="{
                  backgroundColor: oItem.main.btnBgColor||'transparent',
             
                  color: oItem.main.btnFontColor||'transparent',
                }"><i class="iconfont icon-xuanfuanniu1" :style="{color:oItem.main.btnIconColor}"></i>添加</span>
                            <span class="txt">这里有很多新模板！快戳我 >></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Bus from "@/utils/bus";
import { mapState } from "vuex";
export default {
    name: "commissionTemplateHeadComponent",
    data() {
        return {
            oItem: null,
        };
    },
    created() {},
    props: ["item", "ename", "id"],
    components: {},
    mounted() {
        this.$nextTick(() => {
            this.init();
        });
        const emitName = this.ename + this.id;
        Bus.$off(emitName);
        Bus.$on(emitName, (control) => {
            this.oItem = null;
            this.$nextTick(() => {
                this.oItem = JSON.parse(control);
            });
        });
    },
    methods: {
        //页面初始化
        init() {
            // //console.log("进入init");
            this.oItem = null;
            this.oItem = JSON.parse(JSON.stringify(this.item));
        },
    },
    computed: mapState(["decorate"]),
    watch: {},
};
</script>
<style scoped lang="scss">
.commissionTemplateHeadComponent {box-sizing: border-box;width:100%;
  .wrapper{width:100%;
    box-sizing: border-box;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-attachment: scroll;
        overflow: hidden;
  }
    .content {width:100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        background-color: #fff;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-attachment: scroll;
        padding:10px;
        .left {
            display: flex;
            align-items: center;
            .leftIcon {
                position: relative;
                height: 30px;
                width: 30px;
                z-index: 1;
                margin-right: 8px;
                .bg {
                    background-color: #feefee;
                    opacity: 0.15;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 2;
                    border-radius: 100%;
                }
                .icon {
                    color: #ed5246;
                    font-size: 16px;
                    position: absolute;
                    z-index: 3;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }

            .txt {
                font-size: 16px;
                min-width: 70px;
            }
        }
        .right {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            .style1 {
                button {
                    display: flex;
                    align-items: center;
                    background-color: #f05246;
                    border: none;
                    color: #fff;
                    padding: 7px 15px;
                    border-radius: 30px;
                    i {
                        margin-right: 5px;
                        font-size: 14px;
                    }
                    span {
                        font-size: 14px;
                    }
                }
            }
            .style2 {
                a {
                    display: flex;
                    align-items: center;
                    .btn {
                        font-size: 14px;
                     
                        padding: 2px 5px;
                        display: flex;
                        align-items: center;
                        border-radius: 2px;
                        margin-right: 10px;
                        min-width: 58px;
                    }
                    .txt {
                        font-size: 12px;
                        color: #999;
                        display: flex;
                        text-align: right;
                        justify-content: flex-end;
                    }
                }
            }
        }
    }
}
</style>
